<template>
	<view class="container">
		<view class="background-wrapper">
			<image class="bg-image" :src="bgImage" mode="aspectFill"></image>
			<view class="bg-mask"></view>
		</view>
		
		<view class="logo-area">
			<view class="logo-container">
				<image class="logo" src="/static/logo.jpg" mode="aspectFill"></image>
			</view>
			<text class="app-name">峰邦优程</text>
		</view>
		
		<view class="welcome">欢迎登录</view>
		
	<!-- 	<view class="login-box">
			<button class="login-btn wechat-btn" @tap="getUserInfo" :disabled="isLoading">
				<text class="iconfont icon-weixin"></text>
				<text class="btn-text" v-if="!isLoading">微信授权登录</text>
				<view class="loading-container" v-else>
					<view class="loading-circle"></view>
					<text class="loading-text">登录中...</text>
				</view>
			</button>
		</view>
		
		<view class="agreement">
			<checkbox-group @change="checkboxChange">
				<label class="checkbox-label">
					<checkbox value="agree" :checked="isAgree" color="#07c160" style="transform:scale(0.7)"/>
					<text class="agreement-text">登录即表示同意</text>
					<text class="link" @tap="openUserAgreement">《用户协议》</text>
					<text class="agreement-text">和</text>
					<text class="link" @tap="openPrivacyPolicy">《隐私政策》</text>
				</label>
			</checkbox-group>
		</view> -->
	</view>
</template>
<script>
import config from '@/config';
	export default {
		data() {
			return {
				bgImage: config.baseUrl+"/profile/upload/login-bg.png",
				code: '',
				clientId: getApp().globalData.config.clientId,
				isAgree: false,
				isLoading: false
			}
		},
		mounted() {
			// 页面加载时不自动登录，等待用户点击按钮
			this.getUserInfo()
		},
		methods: {
			// 获取微信登录code
			toLogin() {
				return new Promise((resolve, reject) => {
					wx.login({
						success: (res) => {
							if (res.code) {
								this.code = res.code;
								resolve(res.code);
							} else {
								uni.showToast({
									title: '登录失败！' + res.errMsg,
									icon: 'none'
								});
								reject(res.errMsg);
							}
						},
						fail: (err) => {
							uni.showToast({
								title: '登录失败！',
								icon: 'none'
							});
							reject(err);
						}
					});
				});
			},
			
			// 获取用户信息
			async getUserInfo() {
				// if (!this.isAgree) {
				// 	uni.showToast({
				// 		title: '请先同意用户协议和隐私政策',
				// 		icon: 'none'
				// 	});
				// 	return;
				// }
				
				this.isLoading = true;
				
				try {
					// 等待获取code
					await this.toLogin();
					
					// 确保code存在
					if (!this.code) {
						uni.showToast({
							title: '获取登录凭证失败',
							icon: 'none'
						});
						this.isLoading = false;
						return;
					}
					
					// 发起登录请求
					this.$store.dispatch('AppLogin', {
						code: this.code,
						clientId: this.clientId
					}).then(() => {
						this.loginSuccess()
					}).catch(err => {
						console.error('登录失败', err);
						this.isLoading = false;
						uni.showToast({
							title: '登录失败，请重试',
							icon: 'none'
						});
					})
					
				} catch (error) {
					console.error('登录过程出错：', error);
					this.isLoading = false;
					uni.showToast({
						title: '登录过程出错',
						icon: 'none'
					});      
				}
			},
			
			// 登录成功后，处理函数
			loginSuccess(result) {
				// 设置用户信息
				this.$store.dispatch('GetInfo').then(res => {
					this.isLoading = false;
					this.$tab.reLaunch('/pages/index')
				}).catch(err => {
					this.isLoading = false;
					console.error('获取用户信息失败', err);
				})
			},
			
			// 复选框变化
			checkboxChange(e) {
				this.isAgree = e.detail.value.includes('agree');
			},
			
			// 打开用户协议
			openUserAgreement() {
				uni.navigateTo({
					url: '/pages/common/webview/index?url=' + encodeURIComponent('https://www.baidu.com')
				});
			},
			
			// 打开隐私政策
			openPrivacyPolicy() {
				uni.navigateTo({
					url: '/pages/common/webview/index?url=' + encodeURIComponent('https://example.com/privacy-policy')
				});
			}
		},
	}
</script>

<style lang='scss'>
	page {
		background: #fff;
	}

	.container {
		position: relative;
		width: 100vw;
		height: 100vh;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	.background-wrapper {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: -1;
	}
	
	.bg-image {
		width: 100%;
		height: 100%;
	}
	
	.bg-mask {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.4);
	}
	
	.logo-area {
		margin-top: 400rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	.logo-container {
		width: 190rpx;
		height: 190rpx;
		border-radius: 50%;
		background-color: rgba(255, 255, 255, 0.2);
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.2);
		backdrop-filter: blur(5px);
	}
	
	.logo {
		width: 180rpx;
		height: 180rpx;
		border-radius: 50%;
	}
	
	.app-name {
		margin-top: 30rpx;
		font-size: 40rpx;
		font-weight: bold;
		color: #fff;
	}

	.welcome {
		margin-top: 100rpx;
		font-size: 52rpx;
		color: #fff;
		font-weight: bold;
		text-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.3);
	}
	
	.login-box {
		margin-top: 120rpx;
		width: 80%;
	}
	
	.login-btn {
		width: 100%;
		height: 90rpx;
		border-radius: 45rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.1);
	}
	
	.wechat-btn {
		background: #07c160;
		color: #fff;
		
		&[disabled] {
			background: #7fdea9;
		}
	}
	
	.btn-text {
		margin-left: 10rpx;
	}
	
	.loading-container {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.loading-circle {
		width: 36rpx;
		height: 36rpx;
		border: 4rpx solid rgba(255, 255, 255, 0.3);
		border-top: 4rpx solid #fff;
		border-radius: 50%;
		margin-right: 10rpx;
		animation: spin 1s linear infinite;
	}
	
	.loading-text {
		font-size: 28rpx;
		color: #ffeb3b;
		font-weight: bold;
	}
	
	@keyframes spin {
		0% { transform: rotate(0deg); }
		100% { transform: rotate(360deg); }
	}
	
	.agreement {
		position: absolute;
		bottom: 80rpx;
		width: 100%;
		display: flex;
		justify-content: center;
	}
	
	.checkbox-label {
		display: flex;
		align-items: center;
		font-size: 26rpx;
	}
	
	.agreement-text {
		color: rgba(255, 255, 255, 0.8);
	}
	
	.link {
		color: #07c160;
	}
</style>